<template>
  <div class="article-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="props.isImmediate"
      >
        <template v-for="item in list" :key="item.id">
          <article-card :article="item" />
        </template>
      </van-list>
    </van-pull-refresh>
    <van-empty
      class="empty"
      image="search"
      description="哦吼,没找到!"
      v-if="isEmpty"
    />
  </div>
</template>

<script setup lang="ts">
import {
  findArticlesByUserId,
  getArticleList,
  getArticlesByTagId,
  searchArticle
} from '../service/article'
import { articleListRes } from '../service/article/types'
import ArticleCard from './article-card.vue'

const props = defineProps<{
  tagId?: number
  method: 'tag' | 'search' | 'publish'
  searchVal?: string
  userId?: number
  isImmediate: boolean
}>()
const emit = defineEmits<{
  (e: 'getTotalCount', totalCount: number): void
}>()
const route = useRoute()
const list = ref<articleListRes.Article[]>([])
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)
const totalCount = ref<number>(0)
const refreshing = ref<boolean>(false)
const isEmpty = ref<boolean>(false)

const onRefresh = () => {
  finished.value = false
  loading.value = true
  onLoad()
}
const onLoad = async () => {
  if (refreshing.value) {
    list.value = []
    refreshing.value = false
  }
  if (props.method === 'tag' && props.tagId) {
    let res
    if (props.tagId === -1) {
      res = await getArticleList(list.value.length, 10)
    } else {
      if (!props.tagId) return
      res = await getArticlesByTagId(props.tagId, {
        offect: list.value.length,
        limit: 10
      })
    }
    list.value.push(...res.data.articles)
    loading.value = false
    totalCount.value = res.data.totalCount
  } else if (props.method === 'search' && props.searchVal) {
    isEmpty.value = false
    const res = await searchArticle(props.searchVal, {
      offect: list.value.length,
      limit: 5
    })
    list.value.push(...res.data.articles)
    if (list.value.length === 0) isEmpty.value = true
    loading.value = false
    totalCount.value = res.data.totalCount
  } else if (props.method === 'publish') {
    const id = parseInt(route.params.id as string)
    const res = await findArticlesByUserId(id, {
      offect: list.value.length,
      limit: 5
    })
    list.value.push(...res.data.articles)
    loading.value = false
    totalCount.value = res.data.totalCount
    emit('getTotalCount', res.data.totalCount)
  }

  if (list.value.length >= totalCount.value) {
    finished.value = true
  }
}

defineExpose({
  list,
  finished,
  refreshing,
  onRefresh
})
</script>

<style lang="scss" scoped>
.article-list {
  padding: 0 15px;
  height: 100%;
  :deep(.van-pull-refresh) {
    height: 100%;
    .van-pull-refresh__track {
      min-height: calc(100vh - 148px);
    }
  }
  .empty {
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    background-color: #fafafa;
  }
}
</style>
